<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Persistent drag and drop tree with jQuery, PHP and MySQL</title>
		<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
		<link rel="stylesheet" href="js/nyroModal-1.3.0/styles/nyroModal.css" type="text/css" media="screen" />

		<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
		<script src="js/nyroModal-1.3.0/js/jquery.nyroModal-1.3.0.pack.js"></script>   
		<script type="text/javascript" src="js/jquery.simple.tree.js"></script>
		<script type="text/javascript">
		var simpleTreeCollection;	
		$(document).ready(function(){
			
			simpleTreeCollection = $('.simpleTree').simpleTree({
				
				autoclose: false,
				docToFolderConvert: false,
				
				afterClick:function(node){
					// nothing to do for now...
				},
				
				afterDblClick:function(node){
					categoryId = $('span:first',node).parent("li").attr("id");
					parentId = $('span:first',node).parent("li").parent("ul").parent("li").attr("id");

					$.nyroModalManual({
						url: 'update.php?category_id='+categoryId,
						width: 250, // default Width If null, will be calculate automatically
						height: 130, // default Height If null, will be calculate automatically
						minWidth: null, // Minimum width
						minHeight: null, // Minimum height
						endRemove: function() {window.location.reload()}
					});		
	
					return false;
		
				},
				afterMove:function(){	
					var serialStr = "";
					var order = "";
					$("ul.simpleTree li span").each(function(){			
						parentId = $(this).parent("li").parent("ul").parent("li").attr("id");
						if (parentId == undefined) parentId = "root";
						order = (($(this).parent("li").prevAll("li").size()+1))/2; 
						if ( parentId != "root") serialStr += ""+parentId+":"+$(this).parent("li").attr("id")+":"+order+"|";
					});
					$.ajax({
					   type: "POST",
					   url: "saveData.php",
					   data: "serialized="+serialStr,
					   success: function(msg){
					   	 $("#serializedList").html(msg);
					   }
					 });
			
					return false;
					
				},
				docToFolderConvert: false,
				afterAjax:function()
				{
					//alert('Loaded');
				},
				animate:true
			});	
			
			$(".add_category").click(function(){
				categoryId = $(this).parent("li").attr("id");
				$.nyroModalManual({
					url: 'add.php?category_id='+categoryId,
					width: 250, // default Width If null, will be calculate automatically
					height: 130, // default Height If null, will be calculate automatically
					minWidth: null, // Minimum width
					minHeight: null, // Minimum height
					endRemove: function() {window.location.reload()}
				});
			});
			
			$(".delete_category").click(function(){
				parentId = $(this).parent("li").attr("id");
				category_name = $(this).siblings("span").text();
				$.nyroModalManual({
					url: 'delete.php?category_id='+parentId+'&category_name='+category_name,
					endRemove: function() {window.location.reload()},
					width: 450, // default Width If null, will be calculate automatically
					height: 150, // default Height If null, will be calculate automatically
					minWidth: null, // Minimum width
					minHeight: null, // Minimum height
					resizeable: false, // Indicate if the content is resizable. Will be set to false for swf
					autoSizable: false, // Indicate if the content is auto sizable. If not, the min size will be used
					padding: 0 // padding for the max modal size	
				});
			});			
			
		});
		</script>
		
	</head>
<body>
<?php 
// database connection

include_once("connection.php");

$rsCategories = mysql_query("SELECT * FROM category ORDER BY parent_id, orderby");

$arrayCategories = array();

while($row = mysql_fetch_assoc($rsCategories)){ 
	$arrayCategories[$row['category_id']] = array("parent_id" => $row['parent_id'], "name" => $row['category_label']);	
} 

function createTree($array, $currentParent, $currLevel = 0, $prevLevel = -1) {
		
	foreach ($array as $categoryId => $category) {
		
		if ($currentParent == $category['parent_id']) {						
			
			if ($currLevel > $prevLevel) echo " <ul> \n"; 
			
			if ($currLevel == $prevLevel) echo " </li> \n";
			
			echo '<li id="'.$categoryId.'"><span>'.$category['name'].'</span><img src="images/16-circle-blue-add.png" alt="add subcategory" width="16" height="16" class="add_category"/> <img src="images/16-circle-red-remove.png" alt="remove" width="16" height="16" class="delete_category"/>';
						
			if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
			
			$currLevel++; 

		 	createTree ($array, $categoryId, $currLevel, $prevLevel);
		 	
		 	$currLevel--;	 		 	

		}	

	}
	
	if ($currLevel == $prevLevel) echo "\n </li> \n </ul> \n";

}	
?>
	
	<h2>Persistent drag and drop tree with jQuery, PHP and MySQL.</h2>
	<ul>
		<li>Drag and drop the categories to rearrange it</li>
		<li>Double click the category name to modify the category</li>
		<li><img src="images/16-circle-blue-add.png" alt="add subcategory" width="16" height="16" class="add_category"/> to add a child</li>
		<li><img src="images/16-circle-red-remove.png" alt="remove" width="16" height="16" class="delete_category"/> to delete the branch</li>
	</ul>

	<ul class="simpleTree">
		<li id="0" class="root"><span>Categories</span><img src="images/16-circle-blue-add.png" alt="add subcategory" width="16" height="16" class="add_category"/> <img src="images/16-circle-red-remove.png" alt="remove" width="16" height="16" class="delete_category"/>
			<?php createTree($arrayCategories, 0); ?>
		</li>
	</ul>

	<h3>Serialized data:</h3>
	<div id="serializedList">Rearrange the tree to see how it work</div>
	
	
	<a href="http://www.mdgart.com/jQuery/Simple-Persistent-Tree/persistentTreeCRUD.zip">
	<img src="../../additional_icons/download.png" alt="download" width="48" height="48" border="0"/> Download persistentTreeCRUD.zip
	</a>
	
	</body>
</html>
